@import '../style/theme/color';
@import '../style/theme/corner';
@import '../style/core/_font';
@import '../style/core/animation';

:host {
  display: inline-block;
  position: relative;
}

.devui-tag-item {
  padding: 0 8px;
  min-height: 20px;
  font-size: $devui-font-size;
  line-height: 20px;
  color: $devui-aide-text;
  background-color: $devui-label-bg;
  border-radius: $devui-border-radius;
  border-width: 0;
  border-style: solid;
  border-color: inherit;
  display: block;
  align-items: center;
  position: relative;
  cursor: default;

  .content-wrapper {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    top: 0;
    left: 0;
    opacity: 0;
  }

  span {
    // 设置为0来调整IE下因为基线不同导致的不居中
    vertical-align: 0;
  }

  &:hover:not(.devui-colorful-tag):not(.devui-selected-tag).devui-checkable-tag {
    color: $devui-aide-text-hover;

    .remove-button svg polygon {
      fill: $devui-brand-hover;
    }
  }

  &:hover.devui-checkable-tag {
    .content-wrapper {
      opacity: 0.08;
    }
  }

  &.devui-selected-tag {
    color: $devui-aide-text-hover;

    .remove-button svg polygon {
      fill: $devui-brand-active;
    }
  }

  .remove-button {
    margin-left: 12px;
    font-size: $devui-font-size-icon;
    cursor: pointer;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    svg polygon {
      fill: $devui-icon-fill;
    }

    &:hover {
      text-decoration: none;
      font-size: $devui-font-size-icon;
    }
  }

  .default-button {
    margin-left: 12px;
    font-size: $devui-font-size-icon;
    cursor: pointer;
    width: 12px;
    height: 12px;
    line-height: 12px;
    background-color: $devui-shape-icon-fill;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    transition: background-color $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;

    svg path {
      fill: $devui-light-text;
    }

    &:hover {
      text-decoration: none;
      background-color: $devui-shape-icon-fill-hover;
    }
  }
}

.devui-deletable-tag {
  padding-right: 32px;
}

.devui-colorful-tag {
  height: 18px;
  line-height: 18px;
  border-width: 1px;
  background-color: $devui-base-bg;
}

.blue-w98 {
  color: #0b81f6;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #0b81f6;

  .remove-button svg polygon {
    fill: #0b81f6;
  }

  &.devui-selected-tag {
    background-color: #0b81f6;
  }
}

.aqua-w98 {
  color: #39afcc;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #39afcc;

  .remove-button svg polygon {
    fill: #39afcc;
  }

  &.devui-selected-tag {
    background-color: #39afcc;
  }
}

.olivine-w98 {
  color: #2fa898;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #2fa898;

  .remove-button svg polygon {
    fill: #2fa898;
  }

  &.devui-selected-tag {
    background-color: #2fa898;
  }
}

.green-w98 {
  color: #4eb15e;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #4eb15e;

  .remove-button svg polygon {
    fill: #4eb15e;
  }

  &.devui-selected-tag {
    background-color: #4eb15e;
  }
}

.yellow-w98 {
  color: #b08d1a;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #b08d1a;

  .remove-button svg polygon {
    fill: #b08d1a;
  }

  &.devui-selected-tag {
    background-color: #b08d1a;
  }
}

.orange-w98 {
  color: #d47f35;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #d47f35;

  .remove-button svg polygon {
    fill: #d47f35;
  }

  &.devui-selected-tag {
    background-color: #d47f35;
  }
}

.red-w98 {
  color: #e05a46;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #e05a46;

  .remove-button svg polygon {
    fill: #e05a46;
  }

  &.devui-selected-tag {
    background-color: #e05a46;
  }
}

.pink-w98 {
  color: #f3689a;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #f3689a;

  .remove-button svg polygon {
    fill: #f3689a;
  }

  &.devui-selected-tag {
    background-color: #f3689a;
  }
}

.purple-w98 {
  color: #b05bc1;
  background-color: $devui-base-bg;
  border-width: 1px;
  border-color: #b05bc1;

  .remove-button svg polygon {
    fill: #b05bc1;
  }

  &.devui-selected-tag {
    background-color: #b05bc1;
  }
}

.devui-selected-tag.devui-colorful-tag {
  color: $devui-base-bg;

  .remove-button svg polygon {
    fill: $devui-base-bg;
  }
}

.remove-button svg {
  vertical-align: text-top;
}

.devui-tag-item {
  &.devui-checkable-tag {
    transition: color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth, background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;

    .content-wrapper {
      transition: opacity $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
    }

    .remove-button svg polygon {
      transition: fill $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
    }
  }
}

.devui-max-width-tag {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
